<template>
    <div id="roleJurisdictionSetPopup">
        <p style="background-color: rgb(51, 61, 73);color:#fff;padding: 1% 2%;"> 角色权限设置</p>
        <div style="padding: 1% 5%;">
            <el-form :model="infoList" label-width="80px" class="demo-ruleForm" label-position="left">
                <el-form-item label="角色名称">
                    <el-input v-model="infoList.role"></el-input>
                </el-form-item>
                <el-form-item label="角色说明">
                    <el-input v-model="infoList.msg"></el-input>
                </el-form-item>
            </el-form>
            <p>权限配置：</p>
            <tree-transfer 
            :title="['模块（菜单）访问权限', '拥有的操作权限']"
            :from_data='fromData'
            :to_data='toData'
            :defaultProps="{label:'label', children: 'children'}"
            @addBtn='add'
            @removeBtn='remove'
            :mode='mode'
            :pid="parentId"
            :style="{height: '50vh'}"
            filter
            openAll>
            </tree-transfer>
            <div style="width:100%;    text-align: center;margin-top: 2%;margin-bottom:2%;">
                <el-button @click="CloseDiv('Mybutton','fade')">保存</el-button>
                <el-button @click="CloseDiv('Mybutton','fade')">关闭</el-button>
            </div>
        </div>
    </div>
</template>
<style scoped>
.white_content span{
        color: #fff;
    }
</style>
<style lang="scss" scoped>
#roleJurisdictionSetPopup{
    height: 100%;
    p{
        text-align: left;
        // font-size: 1.8rem;
        line-height: 40px;
    }
    ::v-deep.el-input__inner{
        width: 25vh;
    }
    ::v-deep.el-form-item {
        width: 50%;
        float: left;
    }
    ::v-deep.el-transfer-panel{
        width: 38%;
    }
    ::v-deep.el-button.is-circle{
        padding: 20px;
    }
    ::v-deep.wl-transfer .transfer-left, ::v-deep.wl-transfer .transfer-right {
        border: 5px solid #eee;
    }
    ::v-deep.wl-transfer .transfer-title{
        background-color: #eee;
        color: #000;
    }
    .el-button:last-of-type{
        background-color: #fff;
    }
    .el-button:first-of-type{
        color: white;
        background-color: RGB(51, 61, 73);
        border-color: RGB(51, 61, 73);
        margin-right: 10px;
    }
    
}
</style>
<script>
// import $ from 'jquery'
import treeTransfer from 'el-tree-transfer' 
export default {
    props: {
    },
    components:{ treeTransfer },
    data(){
        return{
            infoList:{
                role:'',
                msg: ''
            },
            parentId: 'parentId',
            mode: "transfer", //设置模式，字段可选值为transfer|addressList 类型：String 必填：false 补充：mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
            fromData: [
                {
                id: "1",
                parentId: 0,
                label: "房源综合业务管理平台",
                children: [
                {
                    id: "1-1",
                    parentId: "1",
                    label: "首页",
                    children: []
                },{
                    id: "1-2",
                    parentId: "1",
                    label: "房源信息管理系统",
                    children: [
                    {
                        id: "1-2-1",
                        parentId: "1-2",
                        children: [],
                        label: "数据统计"
                    },{
                        id: "1-2-2",
                        parentId: "1-2",
                        children: [],
                        label: "房源信息管理"
                    },{
                        id: "1-2-3",
                        parentId: "1-2",
                        children: [],
                        label: "房源入库管理"
                    },{
                        id: "1-2-4",
                        parentId: "1-2",
                        children: [],
                        label: "房源修改审批"
                    },{
                        id: "1-2-5",
                        parentId: "1-2",
                        children: [],
                        label: "小区信息管理"
                    },{
                        id: "1-2-6",
                        parentId: "1-2",
                        children: [],
                        label: "配建房台账管理"
                    }]
                },{
                    id: "1-3",
                    parentId: "1",
                    label: "计划调拨管理系统",
                    children: [
                    {
                        id: "1-3-1",
                        parentId: "1-3",
                        children: [],
                        label: "计划调拨"
                    },{
                        id: "1-3-2",
                        parentId: "1-3",
                        children: [],
                        label: "调拨管理"
                    },{
                        id: "1-3-3",
                        parentId: "1-3",
                        children: [],
                        label: "配建房分配管理"
                    },{
                        id: "1-3-4",
                        parentId: "1-3",
                        children: [],
                        label: "结算管理"
                    }]
                },{
                    id: "1-4",
                    parentId: "1",
                    label: "产权信息化管理",
                    children: [
                    {
                        id: "1-4-1",
                        parentId: "1-4",
                        children: [],
                        label: "拆迁户信息管理"
                    },{
                        id: "1-4-2",
                        parentId: "1-4",
                        children: [],
                        label: "配建房合同管理"
                    },{
                        id: "1-4-3",
                        parentId: "1-4",
                        children: [],
                        label: "产权管理"
                    },{
                        id: "1-4-4",
                        parentId: "1-4",
                        children: [],
                        label: "业主信息管理"
                    }]
                },{
                    id: "1-5",
                    parentId: "1",
                    label: "信息决策管理",
                    children: [
                    {
                        id: "1-5-1",
                        parentId: "1-5",
                        children: [],
                        label: "项目进展分析"
                    },{
                        id: "1-5-2",
                        parentId: "1-5",
                        children: [],
                        label: "运行数据查询"
                    },{
                        id: "1-5-3",
                        parentId: "1-5",
                        children: [],
                        label: "决策信息管理"
                    }]
                }]
            }],
            toData:[]
        }
    },
    methods:{
        // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
        changeMode() {
            if (this.mode == "transfer") {
            this.mode = "addressList";
            } else {
            this.mode = "transfer";
            }
        },
        // 监听穿梭框组件添加
        add(fromData,toData,obj){
            console.log("fromData:", fromData);
            console.log("toData:", toData);
            console.log("obj:", obj);
        },
        // 监听穿梭框组件移除
        remove(fromData,toData,obj){
            console.log("fromData:", fromData);
            console.log("toData:", toData);
            console.log("obj:", obj);
        },
        // 关闭弹窗
        CloseDiv(Mybutton,bg_div){
            document.getElementById(Mybutton).style.display='none';
            document.getElementById(bg_div).style.display='none';
        },
    },
    created(){},
    mounted(){},
}
</script>